<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- /* ::meta, ::title, ::link, ::style, ::script */ -->
<head th:replace="fragment :: common_head(~{::meta},~{::title},~{},~{},~{})">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>
<body>
<!-- fragment 是 thymeleaf 视图解析器识别的视图名 -->
<header id="header" th:replace="fragment :: header"></header>

<div id="content">
    <h2>首页</h2>
    <p th:text="|Author: ${author}|"></p>
    <p th:utext="#{index.welcome(${date})}">Welcome message</p>
    <!--/*@thymesVar id="date" type="java.util.Date"*/-->
    time:<span th:text="${date}"></span><br>
    time:<span th:text="${{date}}"></span><br>
    <!-- 时间格式化 -->
    time:<span th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}"></span><br>
    country: <span th:text="${#locale.country}"></span>
</div>
<div id="example">aaaaaa</div>
<script type="text/babel">
    /*
    let names = ['Alice', '赵波', 'djh'];
    ReactDOM.render(
        <div>
            {
                names.map(function(name) {
                    return <p>Hello, {name}!</p>
                })
            }
        </div>
        , document.getElementById('example')
    );
    */

    /*
    let arr = [
        <h1>Hello, world!</h1>,
        <h2>React is awesome</h2>
    ];
    ReactDOM.render(
        <div>
            {
                arr
            }
        </div>
        , document.getElementById('example')
    );
    */

    // 组件
    /*
    let HelloMessage = React.createClass({
        render:  function() {
            return <h1>Hello {this.props.name}</h1>;
        }
    });

    ReactDOM.render(
        <HelloMessage name="赵波"/>
        , $('#example').get(0)
    );
    */

    // 组件子节点
    /**
     * React.Children 是帮助处理 组件子节点的工具类.
     */
    /*
    let NodeList = React.createClass({
        render: function() {
            return (
                <ol>
                {
                    React.Children.map(this.props.children, function(child) {
                       return <li>{child}</li>;
                    })
                }
                </ol>
            )
        }
    });

    ReactDOM.render(
        <NodeList>
            <node>1111</node>
            <node>2222</node>
        </NodeList>
        , $('#example').get(0)
    );
    */

    // 验证组件属性
    /**
     * 1. 组件中设置 propTypes 属性
     * 2. 使用 React.PropTypes 工具类设置
     */

    /*
    let MyTitle = React.createClass({
       propTypes: {
           // title 属性: 必须是 string 的值, 必须要有
           title: React.PropTypes.string.isRequired
       },
       render: function() {
           return (<h1>{this.props.title}</h1>);
       }
    });

    let abc = 123;
    ReactDOM.render(
        <MyTitle title={abc}/>
        , $('#example').get(0)
    );
    */

    // 获取真实 DOM 节点
    /**
     * 在 render 的 return 中定义属性 ref 用来将来获取
     * 使用 this.refs 获取真实 DOM
     */
    /*
    let MyComponent = React.createClass({
        handleClick: function() {
//            this.refs.myTextInput.focus();

            this.refs.myTextInput.focus();
        },
        render: function () {
            return (
                <div>
                    <input type="text" ref="myTextInput"/>
                    <input type="button" value="Focus the text input" onClick={this.handleClick}/>
                </div>
            );
        }
    });

    ReactDOM.render(
        <MyComponent/>
//        , $('#example').get(0)
        , document.getElementById('example')
    );
    */

    // 组件状态
    /**
     * 1. 组件的 getInitialState 设置初始状态(状态的属性, 值)
     * 2. 通过 this.state 访问状态, this.setState() 方法修改状态
     *
     * 3. 与 this.props 的区别:
     * 两者都用于描述组件的特性, 但是 this.props 表示一旦定义, 就不会改变的特性.
     * 而 this.state 是与用户交互, 可以改变的特性.
     */
    /*
    let LikeButton = React.createClass({
        getInitialState: function() {
            return {liked: false};
        },
        handleClick: function() {
            this.setState({liked: !this.state.liked}); // 这个方法会自动调用 this.render() 方法, 重新渲染组件
        },
        render: function() {
            let text = this.state.liked? 'like': 'not like';
            return (
                <p onClick={this.handleClick}>
                    You {text} this. Click to toggle.
                </p>
            );
        }
    });

    ReactDOM.render(
        <LikeButton/>
        , $('#example').get(0)
    );
    */

    // 表单
    /**
     * 用户在表单输入内容, 属于交互, 得用 this.state
     */
    /*
    let Input = React.createClass({
        getInitialState: function() {
            return {value: 'helooooo'};
        },
        handleChange: function(event) {
            this.setState({value: event.target.value});
        },
        render: function() {
            let val = this.state.value;
            return (
                <div>
                    <input type="text" value={val} onChange={this.handleChange}/>
                    <p>{val}</p>
                </div>
            );
        }
    });

    ReactDOM.render(
        <Input/>
        , $('#example').get(0)
    );
    */

</script>


<footer id="footer" th:replace="fragment :: footer"></footer>

</body>
</html>
			